import React from "react";
import { View, Text } from "@tarojs/components";
import { Icon } from '@nutui/nutui-react'
const prefixCls = "address-card";
import { Address } from "../../../types/address";
import './index.scss'
const EditIcon = ({ size = 20, color = 'currentColor', onClick }: { size?: number | string, color?: string, onClick?: () => void }) => (
  <svg onClick={onClick} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={size} height={size} fill={color}>
    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
  </svg>
);
interface Item {
  item: Address
  onEditAddress: (e: Address) => void
  isAdd?: boolean
}
const AddressCard = (props: Item) => {
  const { item, onEditAddress, isAdd = false } = props;
  const hanldleData = () => {
    // 在网页中发送消息（需要配合上面的 injectedJavaScript）

    window?.ReactNativeWebView.postMessage(JSON.stringify({
      action: 'BUTTON_CLICKED',
      data: { item: item, select: true }
    }));
  }
  return (
    <View onClick={() => {
      isAdd && hanldleData()
    }} className={prefixCls}>
      <View className={`${prefixCls}-header`}>
        <Text className={`${prefixCls}-title`}>{item.province}</Text>
        {/* <Text className={`${prefixCls}-title`}>武汉市</Text>
        <Text className={`${prefixCls}-title`}>洪山区</Text>
        <Text className={`${prefixCls}-title`}>九峰街道</Text> */}
      </View>
      <View className={`${prefixCls}-body`}>
        <Text>{item.detail_address}</Text>
        {!isAdd && <EditIcon onClick={() => {
          onEditAddress(item)
        }} size={16} color="#7c889c"></EditIcon>}
      </View>
      <View className={`${prefixCls}-footer`}>
        <Text className={`${prefixCls}-footer-text`}> {item.recipient_name} {item.contact_phone}</Text>
        {item.is_default === 1 && <Text className={`${prefixCls}-footer-default`}>默认</Text>}
      </View>
    </View>

  )
}
export default AddressCard;